<div class="block-content upper-index no-padding">
<h1>Simple lists</h1>
	
<div class="block-controls">
	<ul class="controls-buttons">
		<li><b>Required files:</b><br>
		common.css, simple-lists.css</li>
		<li class="sep"></li>
		<li><b>Available in:</b><br>
		standard + mobile</li>
	</ul>
</div>
</div>

<div class="block-content no-title">
<h2>Bulleted list</h2>

<div class="columns">
	<div class="colx2-left">
		<pre class="brush: html;">
&lt;ul class="bullet-list"&gt;
	&lt;li&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
	&lt;li&gt;Duis aute irure dolor&lt;/li&gt;
	&lt;li&gt;Excepteur sint occaecat&lt;/li&gt;
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx2-right">
		<ul class="bullet-list">
			<li>Lorem ipsum dolor sit amet</li>
			<li>Duis aute irure dolor</li>
			<li>Excepteur sint occaecat</li>
		</ul>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Keywords</h2>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html;">
&lt;!-- Without link --&gt;
&lt;ul class="keywords"&gt;
	&lt;li&gt;Sea&lt;/li&gt;
	&lt;li&gt;Fish&lt;/li&gt;
	&lt;li&gt;Bubble&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- With link --&gt;
&lt;ul class="keywords"&gt;
	&lt;li&gt;&lt;a href="#"&gt;Sea&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Fish&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Bubble&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- With pictos --&gt;
&lt;ul class="keywords"&gt;
	&lt;li&gt;&lt;img src="images/icons/fugue/tag-small.png" width="16" height="16"&gt; Sea&lt;/li&gt;
	&lt;li&gt;&lt;img src="images/icons/fugue/tag-small.png" width="16" height="16"&gt; Fish&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/icons/fugue/tag-small.png" width="16" height="16"&gt; Bubble&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Colors --&gt;
&lt;ul class="keywords"&gt;
	&lt;li&gt;Blue&lt;/li&gt;
	&lt;li class="orange-keyword"&gt;Orange&lt;/li&gt;
	&lt;li class="purple-keyword"&gt;Purple&lt;/li&gt;
	&lt;li class="green-keyword"&gt;Green&lt;/li&gt;
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx3-right">
		<h4 class="small-margin">Without link</h4>
		<ul class="keywords">
			<li>Sea</li>
			<li>Fish</li>
			<li>Bubble</li>
		</ul>
		
		<h4 class="small-margin">With link</h4>
		<ul class="keywords">
			<li><a href="javascript:void(0)">Sea</a></li>
			<li><a href="javascript:void(0)">Fish</a></li>
			<li><a href="javascript:void(0)">Bubble</a></li>
		</ul>
		
		<h4 class="small-margin">With pictos</h4>
		<ul class="keywords">
			<li><img src="images/icons/fugue/tag-small.png" width="16" height="16"> Sea</li>
			<li><img src="images/icons/fugue/tag-small.png" width="16" height="16"> Fish</li>
			<li><a href="javascript:void(0)"><img src="images/icons/fugue/tag-small.png" width="16" height="16"> Bubble</a></li>
		</ul>
		
		<h4 class="small-margin">Colors</h4>
		<ul class="keywords">
			<li>Blue</li>
			<li class="orange-keyword">Orange</li>
			<li class="purple-keyword">Purple</li>
			<li class="green-keyword">Green</li>
		</ul>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Tags &amp; floating tags</h2>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html;">
&lt;!-- Tags --&gt;
&lt;ul class="tags"&gt;
	&lt;li&gt;Sea&lt;/li&gt;
	&lt;li&gt;Fish&lt;/li&gt;
	&lt;li&gt;Bubble&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Floating tags --&gt;
&lt;ul class="floating-tags"&gt;
	&lt;li&gt;Sea&lt;/li&gt;
	&lt;li&gt;Fish&lt;/li&gt;
	&lt;li&gt;Bubble&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Tags with links --&gt;
&lt;ul class="tags"&gt;
	&lt;li&gt;&lt;a href="#"&gt;Sea&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Fish&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Bubble&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Floating tags with links --&gt;
&lt;ul class="floating-tags"&gt;
	&lt;li&gt;&lt;a href="#"&gt;Sea&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Fish&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Bubble&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Tags with picto --&gt;
&lt;ul class="tags"&gt;
	&lt;li class="tag-time"&gt;Sea&lt;/li&gt;
	&lt;li class="tag-tags"&gt;Fish&lt;/li&gt;
	&lt;li class="tag-user"&gt;Bubble&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Floating tags with picto --&gt;
&lt;ul class="floating-tags"&gt;
	&lt;li class="tag-time"&gt;Sea&lt;/li&gt;
	&lt;li class="tag-tags"&gt;Fish&lt;/li&gt;
	&lt;li class="tag-user"&gt;Bubble&lt;/li&gt;
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx3-right">
		<h4 class="small-margin float-right">Floating</h4>
		<h4 class="small-margin">Tags</h4>
		<ul class="floating-tags">
			<li>Sea</li>
			<li>Fish</li>
			<li>Bubble</li>
		</ul>
		<ul class="tags">
			<li>Sea</li>
			<li>Fish</li>
			<li>Bubble</li>
		</ul>
		<div class="clear with-margin"></div>
		
		<h4 class="small-margin float-right">Floating</h4>
		<h4 class="small-margin">With link</h4>
		<ul class="floating-tags">
			<li><a href="javascript:void(0)">Sea</a></li>
			<li><a href="javascript:void(0)">Fish</a></li>
			<li><a href="javascript:void(0)">Bubble</a></li>
		</ul>
		<ul class="tags">
			<li><a href="javascript:void(0)">Sea</a></li>
			<li><a href="javascript:void(0)">Fish</a></li>
			<li><a href="javascript:void(0)">Bubble</a></li>
		</ul>
		<div class="clear with-margin"></div>
		
		<h4 class="small-margin float-right">Floating</h4>
		<h4 class="small-margin">With picto</h4>
		<ul class="floating-tags">
			<li class="tag-time">Sea</li>
			<li class="tag-tags">Fish</li>
			<li class="tag-user">Bubble</li>
		</ul>
		<ul class="tags">
			<li class="tag-time">Sea</li>
			<li class="tag-tags">Fish</li>
			<li class="tag-user">Bubble</li>
		</ul>
		<div class="clear"></div>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Small pagination</h2>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html;">
&lt;ul class="small-pagination"&gt;
	&lt;li class="prev"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
	&lt;li class="current"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&amp;nbsp;•&amp;nbsp;•&amp;nbsp;•&amp;nbsp;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;119&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;120&lt;/a&gt;&lt;/li&gt;
	&lt;li class="next"&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx3-right">
		<ul class="small-pagination">
			<li class="prev"><a href="javascript:void(0)">Prev</a></li>
			<li class="current"><a href="javascript:void(0)">1</a></li>
			<li><a href="javascript:void(0)">2</a></li>
			<li>&nbsp;•&nbsp;•&nbsp;•&nbsp;</li>
			<li><a href="javascript:void(0)">119</a></li>
			<li><a href="javascript:void(0)">120</a></li>
			<li class="next"><a href="javascript:void(0)">Next</a></li>
		</ul>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Arbo</h2>

<p class="message warning">This style requires the file <strong>js/list.js</strong> to be fully fonctional.</p>

<p>The <strong>arbo</strong> class is usefull to display arborescent data, with infinite nested levels. You can easily control whether branches are opened or closed (by adding/removing the class <strong>closed</strong>), use titles and change icons.</p>

<div class="box">
	<p class="infos">To close a branch, add the class <strong>closed</strong> to it. Note that, for accessibility issues, it is not recommended to apply it in the source-code, but rather at runtime, because if the browser has Javascript disabled or if it stops on an error, the user won't be able to open the branches. Therefore, you should rather use the class <strong>close</strong> (without <b>d</b>): the template setup function will then automatically close these branches at startup.</p>
</div>

<h4>With title elements</h4>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html;">
&lt;ul class="arbo with-title"&gt;
	&lt;li&gt;
		
		&lt;!-- Add the class toggle to a title to make it open/close its branch -->
		&lt;!-- There are various classes for titles, check on the right -->
		&lt;a href="#" class="title-user toggle"&gt;My documents&lt;/a&gt;
		
		&lt;ul&gt;
		
			&lt;!-- Add the class 'closed' or 'close' (read above) to a branch to collapse it --&gt;
			&lt;li class="close"&gt;
				
				&lt;!-- This span will display a button to open/collapse the branch -->
				&lt;span class="toggle"&gt;&lt;/span&gt;
				&lt;a href="#" class="folder"&gt;&lt;span&gt;Templates&lt;/span&gt;&lt;/a&gt;
				&lt;ul&gt;
				
					&lt;!-- There are various classes for documents, check on the right -->
					&lt;li&gt;&lt;a href="#" class="document-web"&gt;&lt;span&gt;File 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#" class="document-web"&gt;&lt;span&gt;File 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#" class="document-web"&gt;&lt;span&gt;File 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/li&gt;
			&lt;li class="close"&gt;
				&lt;span class="toggle"&gt;&lt;/span&gt;
				&lt;a href="#" class="folder"&gt;&lt;span&gt;Archives&lt;/span&gt;&lt;/a&gt;
				&lt;ul&gt;
					&lt;li&gt;&lt;a href="#" class="document-excel"&gt;&lt;span&gt;File 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#" class="document-web"&gt;&lt;span&gt;File 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#" class="document-flash"&gt;&lt;span&gt;File 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/li&gt;
			&lt;li&gt;
				&lt;span class="toggle"&gt;&lt;/span&gt;
				
				&lt;!-- Add the class current to an element to highlight it --&gt;
				&lt;a href="#" class="current folder"&gt;&lt;span&gt;Documents&lt;/span&gt;&lt;/a&gt;
				
				&lt;ul&gt;
					&lt;li class="close"&gt;
						&lt;span class="toggle"&gt;&lt;/span&gt;
						
						&lt;!-- There are various classes for folders, check on the right -->
						&lt;a href="#" class="folder-bookmark"&gt;&lt;span&gt;Favourites&lt;/span&gt;&lt;/a&gt;
						
						&lt;ul&gt;
							&lt;li&gt;&lt;a href="#" class="document-illustrator"&gt;&lt;span&gt;File 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
							&lt;li&gt;&lt;a href="#" class="document"&gt;&lt;span&gt;File 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
							&lt;li&gt;&lt;a href="#" class="document"&gt;&lt;span&gt;File 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
					&lt;li class="close"&gt;
						&lt;span class="toggle"&gt;&lt;/span&gt;
						&lt;a href="#" class="folder-image"&gt;&lt;span&gt;Images&lt;/span&gt;&lt;/a&gt;
						&lt;ul&gt;
							&lt;li&gt;&lt;a href="#" class="document-image"&gt;&lt;span&gt;File 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
							&lt;li&gt;&lt;a href="#" class="document-image"&gt;&lt;span&gt;File 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
							&lt;li&gt;&lt;a href="#" class="document-music"&gt;&lt;span&gt;File 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
					&lt;li&gt;&lt;a href="#" class="document-photoshop"&gt;&lt;span&gt;Layout.psd&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#" class="document-pdf"&gt;&lt;span&gt;Instructions.pdf&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/li&gt;
			&lt;li&gt;
				&lt;span class="toggle"&gt;&lt;/span&gt;
				&lt;a href="#" class="folder"&gt;&lt;span&gt;Loading folder&lt;/span&gt;&lt;/a&gt;
				&lt;ul&gt;
				
					&lt;!-- Example effect while loading content -->
					&lt;li&gt;&lt;span class="loading"&gt;Loading...&lt;/span&gt;&lt;/li&gt;
					
				&lt;/ul&gt;
			&lt;/li&gt;
			&lt;li&gt;
				&lt;span class="toggle"&gt;&lt;/span&gt;
				&lt;a href="#" class="folder"&gt;&lt;span&gt;Empty folder&lt;/span&gt;&lt;/a&gt;
				&lt;ul&gt;
				
					&lt;!-- Display message for empty folders or loading errors -->
					&lt;li&gt;&lt;span class="empty"&gt;Empty&lt;/span&gt;&lt;/li&gt;
					
				&lt;/ul&gt;
			&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li class="close"&gt;
		&lt;a href="#" class="title-picture toggle"&gt;Public documents&lt;/a&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href="#" class="document-web"&gt;&lt;span&gt;File 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#" class="document-excel"&gt;&lt;span&gt;File 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#" class="document-web"&gt;&lt;span&gt;File 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#" class="document-flash"&gt;&lt;span&gt;File 4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#" class="document-illustrator"&gt;&lt;span&gt;File 5&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#" class="document"&gt;&lt;span&gt;File 6&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#" class="document"&gt;&lt;span&gt;File 7&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li class="close"&gt;
		&lt;a href="#" class="title-computer toggle"&gt;Shared documents&lt;/a&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href="#" class="document-web"&gt;&lt;span&gt;File 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#" class="document-excel"&gt;&lt;span&gt;File 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#" class="document-web"&gt;&lt;span&gt;File 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#" class="document-flash"&gt;&lt;span&gt;File 4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#" class="document-illustrator"&gt;&lt;span&gt;File 5&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#" class="document"&gt;&lt;span&gt;File 6&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#" class="document"&gt;&lt;span&gt;File 7&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx3-right">
		<ul class="arbo with-title">
			<li>
				<a href="javascript:void(0)" class="title-user toggle">My documents</a>
				<ul>
					<li class="close">
						<span class="toggle"></span>
						<a href="javascript:void(0)" class="folder"><span>Templates</span></a>
						<ul>
							<li><a href="javascript:void(0)" class="document-web"><span>File 1</span></a></li>
							<li><a href="javascript:void(0)" class="document-web"><span>File 2</span></a></li>
							<li><a href="javascript:void(0)" class="document-web"><span>File 3</span></a></li>
						</ul>
					</li>
					<li class="close">
						<span class="toggle"></span>
						<a href="javascript:void(0)" class="folder"><span>Archives</span></a>
						<ul>
							<li><a href="javascript:void(0)" class="document-excel"><span>File 1</span></a></li>
							<li><a href="javascript:void(0)" class="document-web"><span>File 2</span></a></li>
							<li><a href="javascript:void(0)" class="document-flash"><span>File 3</span></a></li>
						</ul>
					</li>
					<li>
						<span class="toggle"></span>
						<a href="javascript:void(0)" class="current folder"><span>Documents</span></a>
						<ul>
							<li class="close">
								<span class="toggle"></span>
								<a href="javascript:void(0)" class="folder-bookmark"><span>Favourites</span></a>
								<ul>
									<li><a href="javascript:void(0)" class="document-illustrator"><span>File 1</span></a></li>
									<li><a href="javascript:void(0)" class="document"><span>File 2</span></a></li>
									<li><a href="javascript:void(0)" class="document"><span>File 3</span></a></li>
								</ul>
							</li>
							<li class="close">
								<span class="toggle"></span>
								<a href="javascript:void(0)" class="folder-image"><span>Images</span></a>
								<ul>
									<li><a href="javascript:void(0)" class="document-image"><span>File 1</span></a></li>
									<li><a href="javascript:void(0)" class="document-image"><span>File 2</span></a></li>
									<li><a href="javascript:void(0)" class="document-music"><span>File 3</span></a></li>
								</ul>
							</li>
							<li><a href="javascript:void(0)" class="document-photoshop"><span>Layout.psd</span></a></li>
							<li><a href="javascript:void(0)" class="document-pdf"><span>Instructions.pdf</span></a></li>
						</ul>
					</li>
					<li>
						<span class="toggle"></span>
						<a href="javascript:void(0)" class="folder"><span>Loading folder</span></a>
						<ul>
							<li><span class="loading">Loading...</span></li>
						</ul>
					</li>
					<li>
						<span class="toggle"></span>
						<a href="javascript:void(0)" class="folder"><span>Empty folder</span></a>
						<ul>
							<li><span class="empty">Empty</span></li>
						</ul>
					</li>
				</ul>
			</li>
			<li class="close">
				<a href="javascript:void(0)" class="title-picture toggle">Public documents</a>
				<ul>
					<li><a href="javascript:void(0)" class="document-web"><span>File 1</span></a></li>
					<li><a href="javascript:void(0)" class="document-excel"><span>File 2</span></a></li>
					<li><a href="javascript:void(0)" class="document-web"><span>File 3</span></a></li>
					<li><a href="javascript:void(0)" class="document-flash"><span>File 4</span></a></li>
					<li><a href="javascript:void(0)" class="document-illustrator"><span>File 5</span></a></li>
					<li><a href="javascript:void(0)" class="document"><span>File 6</span></a></li>
					<li><a href="javascript:void(0)" class="document"><span>File 7</span></a></li>
				</ul>
			</li>
			<li class="close">
				<a href="javascript:void(0)" class="title-computer toggle">Shared documents</a>
				<ul>
					<li><a href="javascript:void(0)" class="document-web"><span>File 1</span></a></li>
					<li><a href="javascript:void(0)" class="document-excel"><span>File 2</span></a></li>
					<li><a href="javascript:void(0)" class="document-web"><span>File 3</span></a></li>
					<li><a href="javascript:void(0)" class="document-flash"><span>File 4</span></a></li>
					<li><a href="javascript:void(0)" class="document-illustrator"><span>File 5</span></a></li>
					<li><a href="javascript:void(0)" class="document"><span>File 6</span></a></li>
					<li><a href="javascript:void(0)" class="document"><span>File 7</span></a></li>
				</ul>
			</li>
		</ul>
		
		<hr>
		
		<h3 class="small-margin">Built-in icons / titles</h3>
		
		<ul class="arbo with-title">
			<li><a href="javascript:void(0)" class="title-computer">title-computer</a></li>
			<li><a href="javascript:void(0)" class="title-picture">title-picture</a></li>
			<li><a href="javascript:void(0)" class="title-print">title-print</a></li>
			<li><a href="javascript:void(0)" class="title-user">title-user</a></li>
			<li><a href="javascript:void(0)" class="title-search">title-search</a></li>
		</ul>
		
		<h3 class="small-margin">Built-in icons / folders &amp; documents</h3>
		
		<ul class="arbo">
			<li>
				<span class="toggle"></span>
				<a href="javascript:void(0)" class="folder">Folders</a>
				<ul>
					<li><a href="javascript:void(0)" class="folder"><span>folder</span></a></li>
					<li><a href="javascript:void(0)" class="folder-bookmark"><span>folder-bookmark</span></a></li>
					<li><a href="javascript:void(0)" class="folder-document"><span>folder-document</span></a></li>
					<li><a href="javascript:void(0)" class="folder-music"><span>folder-music</span></a></li>
					<li><a href="javascript:void(0)" class="folder-text"><span>folder-text</span></a></li>
					<li><a href="javascript:void(0)" class="folder-film"><span>folder-film</span></a></li>
					<li><a href="javascript:void(0)" class="folder-image"><span>folder-image</span></a></li>
					<li><a href="javascript:void(0)" class="folder-table"><span>folder-table</span></a></li>
					<li><a href="javascript:void(0)" class="folder-zipper"><span>folder-zipper</span></a></li>
				</ul>
			</li>
			<li>
				<span class="toggle"></span>
				<a href="javascript:void(0)" class="folder">Documents</a>
				<ul>
					<li><a href="javascript:void(0)" class="document"><span>document</span></a></li>
					<li><a href="javascript:void(0)" class="document-access"><span>document-access</span></a></li>
					<li><a href="javascript:void(0)" class="document-binary"><span>document-binary</span></a></li>
					<li><a href="javascript:void(0)" class="document-bookmark"><span>document-bookmark</span></a></li>
					<li><a href="javascript:void(0)" class="document-code"><span>document-code</span></a></li>
					<li><a href="javascript:void(0)" class="document-excel"><span>document-excel</span></a></li>
					<li><a href="javascript:void(0)" class="document-film"><span>document-film</span></a></li>
					<li><a href="javascript:void(0)" class="document-flash"><span>document-flash</span></a></li>
					<li><a href="javascript:void(0)" class="document-illustrator"><span>document-illustrator</span></a></li>
					<li><a href="javascript:void(0)" class="document-image"><span>document-image</span></a></li>
					<li><a href="javascript:void(0)" class="document-music"><span>document-music</span></a></li>
					<li><a href="javascript:void(0)" class="document-office"><span>document-office</span></a></li>
					<li><a href="javascript:void(0)" class="document-pdf"><span>document-pdf</span></a></li>
					<li><a href="javascript:void(0)" class="document-photoshop"><span>document-photoshop</span></a></li>
					<li><a href="javascript:void(0)" class="document-powerpoint"><span>document-powerpoint</span></a></li>
					<li><a href="javascript:void(0)" class="document-text"><span>document-text</span></a></li>
					<li><a href="javascript:void(0)" class="document-web"><span>document-web</span></a></li>
					<li><a href="javascript:void(0)" class="document-word"><span>document-word</span></a></li>
					<li><a href="javascript:void(0)" class="document-zip"><span>document-zip</span></a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>

<h4>Without title elements</h4>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html;">
&lt;ul class="arbo"&gt;
	&lt;li&gt;
		&lt;span class="toggle"&gt;&lt;/span&gt;
		&lt;a href="#" class="folder"&gt;My documents&lt;/a&gt;
		&lt;ul&gt;
			&lt;li class="close"&gt;
				&lt;span class="toggle"&gt;&lt;/span&gt;
				&lt;a href="#" class="folder"&gt;&lt;span&gt;Templates&lt;/span&gt;&lt;/a&gt;
				&lt;ul&gt;
					&lt;li&gt;&lt;a href="#" class="document-web"&gt;&lt;span&gt;File 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#" class="document-web"&gt;&lt;span&gt;File 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#" class="document-web"&gt;&lt;span&gt;File 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/li&gt;
			&lt;li class="close"&gt;
				&lt;span class="toggle"&gt;&lt;/span&gt;
				&lt;a href="#" class="folder"&gt;&lt;span&gt;Archives&lt;/span&gt;&lt;/a&gt;
				&lt;ul&gt;
					&lt;li&gt;&lt;a href="#" class="document-excel"&gt;&lt;span&gt;File 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#" class="document-web"&gt;&lt;span&gt;File 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#" class="document-flash"&gt;&lt;span&gt;File 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/li&gt;
			&lt;li&gt;
				&lt;span class="toggle"&gt;&lt;/span&gt;
				&lt;a href="#" class="current folder"&gt;&lt;span&gt;Documents&lt;/span&gt;&lt;/a&gt;
				&lt;ul&gt;
					&lt;li class="close"&gt;
						&lt;span class="toggle"&gt;&lt;/span&gt;
						&lt;a href="#" class="folder-bookmark"&gt;&lt;span&gt;Favourites&lt;/span&gt;&lt;/a&gt;
						&lt;ul&gt;
							&lt;li&gt;&lt;a href="#" class="document-illustrator"&gt;&lt;span&gt;File 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
							&lt;li&gt;&lt;a href="#" class="document"&gt;&lt;span&gt;File 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
							&lt;li&gt;&lt;a href="#" class="document"&gt;&lt;span&gt;File 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
					&lt;li class="close"&gt;
						&lt;span class="toggle"&gt;&lt;/span&gt;
						&lt;a href="#" class="folder-image"&gt;&lt;span&gt;Images&lt;/span&gt;&lt;/a&gt;
						&lt;ul&gt;
							&lt;li&gt;&lt;a href="#" class="document-image"&gt;&lt;span&gt;File 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
							&lt;li&gt;&lt;a href="#" class="document-image"&gt;&lt;span&gt;File 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
							&lt;li&gt;&lt;a href="#" class="document-music"&gt;&lt;span&gt;File 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
					&lt;li&gt;&lt;a href="#" class="document-photoshop"&gt;&lt;span&gt;Layout.psd&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#" class="document-pdf"&gt;&lt;span&gt;Instructions.pdf&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx3-right">
		<ul class="arbo">
			<li>
				<span class="toggle"></span>
				<a href="javascript:void(0)" class="folder">My documents</a>
				<ul>
					<li class="close">
						<span class="toggle"></span>
						<a href="javascript:void(0)" class="folder"><span>Templates</span></a>
						<ul>
							<li><a href="javascript:void(0)" class="document-web"><span>File 1</span></a></li>
							<li><a href="javascript:void(0)" class="document-web"><span>File 2</span></a></li>
							<li><a href="javascript:void(0)" class="document-web"><span>File 3</span></a></li>
						</ul>
					</li>
					<li class="close">
						<span class="toggle"></span>
						<a href="javascript:void(0)" class="folder"><span>Archives</span></a>
						<ul>
							<li><a href="javascript:void(0)" class="document-excel"><span>File 1</span></a></li>
							<li><a href="javascript:void(0)" class="document-web"><span>File 2</span></a></li>
							<li><a href="javascript:void(0)" class="document-flash"><span>File 3</span></a></li>
						</ul>
					</li>
					<li>
						<span class="toggle"></span>
						<a href="javascript:void(0)" class="current folder"><span>Documents</span></a>
						<ul>
							<li class="close">
								<span class="toggle"></span>
								<a href="javascript:void(0)" class="folder-bookmark"><span>Favourites</span></a>
								<ul>
									<li><a href="javascript:void(0)" class="document-illustrator"><span>File 1</span></a></li>
									<li><a href="javascript:void(0)" class="document"><span>File 2</span></a></li>
									<li><a href="javascript:void(0)" class="document"><span>File 3</span></a></li>
								</ul>
							</li>
							<li class="close">
								<span class="toggle"></span>
								<a href="javascript:void(0)" class="folder-image"><span>Images</span></a>
								<ul>
									<li><a href="javascript:void(0)" class="document-image"><span>File 1</span></a></li>
									<li><a href="javascript:void(0)" class="document-image"><span>File 2</span></a></li>
									<li><a href="javascript:void(0)" class="document-music"><span>File 3</span></a></li>
								</ul>
							</li>
							<li><a href="javascript:void(0)" class="document-photoshop"><span>Layout.psd</span></a></li>
							<li><a href="javascript:void(0)" class="document-pdf"><span>Instructions.pdf</span></a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Picto list</h2>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html;">
&lt;!-- Basic markup --&gt;
&lt;ul class="picto-list"&gt;
	&lt;li&gt;Element&lt;/li&gt;
	&lt;li&gt;Element&lt;/li&gt;
	&lt;li&gt;Element&lt;/li&gt;
	&lt;li&gt;Element&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Common icon --&gt;
&lt;ul class="picto-list icon-info"&gt;
	&lt;li&gt;Element&lt;/li&gt;
	&lt;li&gt;Element&lt;/li&gt;
	&lt;li&gt;Element&lt;/li&gt;
	&lt;li&gt;Element&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Different icons --&gt;
&lt;ul class="picto-list"&gt;
	&lt;li&gt;&lt;em&gt;(basic)&lt;/em&gt;&lt;/li&gt;
	&lt;li class="icon-info"&gt;icon-info&lt;/li&gt;
	&lt;li class="icon-image"&gt;icon-image&lt;/li&gt;
	&lt;li class="icon-user"&gt;icon-user&lt;/li&gt;
	&lt;li class="icon-info"&gt;icon-info&lt;/li&gt;
	&lt;li class="icon-top"&gt;icon-top&lt;/li&gt;
	&lt;li class="icon-tag-small"&gt;icon-tag-small&lt;/li&gt;
	&lt;li class="icon-doc-small"&gt;icon-doc-small&lt;/li&gt;
	&lt;li class="icon-pin-small"&gt;icon-pin-small&lt;/li&gt;
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx3-right">
		<h4 class="small-margin">Basic</h4>
		<ul class="picto-list">
			<li>Element</li>
			<li>Element</li>
			<li>Element</li>
			<li>Element</li>
		</ul>
		
		<h4 class="small-margin">Common icon</h4>
		<ul class="picto-list icon-info">
			<li>Element</li>
			<li>Element</li>
			<li>Element</li>
			<li>Element</li>
		</ul>
		
		<h4 class="small-margin">Different icons</h4>
		<ul class="picto-list">
			<li><em>(basic)</em></li>
			<li class="icon-info">icon-info</li>
			<li class="icon-image">icon-image</li>
			<li class="icon-user">icon-user</li>
			<li class="icon-info">icon-info</li>
			<li class="icon-top">icon-top</li>
			<li class="icon-tag-small">icon-tag-small</li>
			<li class="icon-doc-small">icon-doc-small</li>
			<li class="icon-pin-small">icon-pin-small</li>
		</ul>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Simple list</h2>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html;">
&lt;!-- Basic --&gt;
&lt;ul class="simple-list"&gt;
	&lt;li&gt;Element&lt;/li&gt;
	&lt;li&gt;Element&lt;/li&gt;
	&lt;li&gt;Element&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- With link --&gt;
&lt;ul class="simple-list"&gt;
	&lt;li&gt;&lt;a href="#"&gt;Element&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Element&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Element&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- With icon --&gt;
&lt;ul class="simple-list with-icon"&gt;
	&lt;li&gt;&lt;a href="#"&gt;Element&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Element&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Element&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- With common icon --&gt;
&lt;ul class="simple-list with-icon icon-info"&gt;
	&lt;li&gt;&lt;a href="#"&gt;Element&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Element&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Element&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- With custom icon --&gt;
&lt;ul class="simple-list with-icon"&gt;
	&lt;li class="icon-info"&gt;&lt;a href="#"&gt;icon-info&lt;/a&gt;&lt;/li&gt;
	&lt;li class="icon-user"&gt;&lt;a href="#"&gt;icon-user&lt;/a&gt;&lt;/li&gt;
	&lt;li class="icon-group"&gt;&lt;a href="#"&gt;icon-group&lt;/a&gt;&lt;/li&gt;
	&lt;li class="icon-file"&gt;&lt;a href="#"&gt;icon-file&lt;/a&gt;&lt;/li&gt;
	&lt;li class="icon-tags"&gt;&lt;a href="#"&gt;icon-tags&lt;/a&gt;&lt;/li&gt;
	&lt;li class="icon-date"&gt;&lt;a href="#"&gt;icon-date&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx3-right">
		<h4 class="small-margin">Basic</h4>
		<ul class="simple-list">
			<li>Element</li>
			<li>Element</li>
			<li>Element</li>
		</ul>
		
		<h4 class="small-margin">With link</h4>
		<ul class="simple-list">
			<li><a href="javascript:void(0)">Element</a></li>
			<li><a href="javascript:void(0)">Element</a></li>
			<li><a href="javascript:void(0)">Element</a></li>
		</ul>
		
		<h4 class="small-margin">With icon</h4>
		<ul class="simple-list with-icon">
			<li><a href="javascript:void(0)">Element</a></li>
			<li><a href="javascript:void(0)">Element</a></li>
			<li><a href="javascript:void(0)">Element</a></li>
		</ul>
		
		<h4 class="small-margin">With common icon</h4>
		<ul class="simple-list with-icon icon-info">
			<li><a href="javascript:void(0)">Element</a></li>
			<li><a href="javascript:void(0)">Element</a></li>
			<li><a href="javascript:void(0)">Element</a></li>
		</ul>
		
		<h4 class="small-margin">With custom icon</h4>
		<ul class="simple-list with-icon">
			<li class="icon-info"><a href="javascript:void(0)">icon-info</a></li>
			<li class="icon-user"><a href="javascript:void(0)">icon-user</a></li>
			<li class="icon-group"><a href="javascript:void(0)">icon-group</a></li>
			<li class="icon-file"><a href="javascript:void(0)">icon-file</a></li>
			<li class="icon-tags"><a href="javascript:void(0)">icon-tags</a></li>
			<li class="icon-date"><a href="javascript:void(0)">icon-date</a></li>
		</ul>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Collapsible list</h2>

<p class="message warning">This style requires the file <strong>js/list.js</strong> to be fully fonctional.</p>

<p>The collapsible list works quite like the arbo class, but with a different styling. It also allows infinite nested levels, collapsing by class adding and icon customization.</p>

<div class="box">
	<p class="infos">To close a branch, add the class <strong>closed</strong> to it. Note that, for accessibility issues, it is not recommended to apply it in the source-code, but rather at runtime, because if the browser has Javascript disabled or if it stops on an error, the user won't be able to open the branches. Therefore, you should rather use the class <strong>close</strong> (without <b>d</b>): the template setup function will then automatically close these branches at startup.</p>
</div>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html;">
&lt;!-- Add the class with-bg to add background --&gt;
&lt;ul class="collapsible-list"&gt;
	&lt;li&gt;
	
		&lt;!-- This adds the toggle button --&gt;
		&lt;b class="toggle"&gt;&lt;/b&gt;
		
		&lt;span&gt;Expanded element&lt;/span&gt;
		
		&lt;!-- The class with-icon will add an icon - see simple-list for available icons --&gt;
		&lt;ul class="with-icon icon-group"&gt;
		
			&lt;!-- Add the class 'closed' or 'close' (read above) to a branch to collapse it --&gt;
			&lt;li class="close"&gt;
			
				&lt;span&gt;Administrators&lt;/span&gt;
				
				&lt;!-- There can be infinite nested levels --&gt;
				&lt;ul class="icon-user"&gt;
					&lt;li&gt;&lt;a href="#"&gt;Jane&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;George&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/li&gt;
			&lt;li class="close"&gt;
				&lt;span&gt;Authors&lt;/span&gt;
				&lt;ul class="icon-user"&gt;
					&lt;li&gt;&lt;a href="#"&gt;Erik&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;James&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Nathan&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Elwin&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/li&gt;
			&lt;li&gt;
				&lt;span&gt;Product managers&lt;/span&gt;
				&lt;ul class="icon-user"&gt;
					&lt;li&gt;&lt;a href="#"&gt;John&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Sam&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Lena&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Marc&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/li&gt;
			&lt;li&gt;
				&lt;span&gt;Users&lt;/span&gt;
				&lt;ul&gt;
				
					&lt;!-- Class empty can be usefull to display some message --&gt;
					&lt;li class="empty"&gt;No user&lt;/li&gt;
					
				&lt;/ul&gt;
			&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li class="close"&gt;
		&lt;b class="toggle"&gt;&lt;/b&gt;
		&lt;span&gt;Closed element&lt;/span&gt;
		&lt;ul class="with-icon icon-user"&gt;
			&lt;li&gt;&lt;a href="#"&gt;Erik&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#"&gt;James&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#"&gt;Nathan&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#"&gt;Elwin&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	
	...
	
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx3-right">
		<h4 class="small-margin">Without background</h4>
		<ul class="collapsible-list">
			<li>
				<b class="toggle"></b>
				<span>Expanded element</span>
				<ul class="with-icon icon-group">
					<li class="close">
						<span>Administrators</span>
						<ul class="icon-user">
							<li><a href="javascript:void(0)">Jane</a></li>
							<li><a href="javascript:void(0)">George</a></li>
						</ul>
					</li>
					<li class="close">
						<span>Authors</span>
						<ul class="icon-user">
							<li><a href="javascript:void(0)">Erik</a></li>
							<li><a href="javascript:void(0)">James</a></li>
							<li><a href="javascript:void(0)">Nathan</a></li>
							<li><a href="javascript:void(0)">Elwin</a></li>
						</ul>
					</li>
					<li>
						<span>Product managers</span>
						<ul class="icon-user">
							<li><a href="javascript:void(0)">John</a></li>
							<li><a href="javascript:void(0)">Sam</a></li>
							<li><a href="javascript:void(0)">Lena</a></li>
							<li><a href="javascript:void(0)">Marc</a></li>
						</ul>
					</li>
					<li>
						<span>Users</span>
						<ul>
							<li class="empty">No user</li>
						</ul>
					</li>
				</ul>
			</li>
			<li class="close">
				<b class="toggle"></b>
				<span>Closed element</span>
				<ul class="with-icon icon-user">
					<li><a href="javascript:void(0)">Erik</a></li>
					<li><a href="javascript:void(0)">James</a></li>
					<li><a href="javascript:void(0)">Nathan</a></li>
					<li><a href="javascript:void(0)">Elwin</a></li>
				</ul>
			</li>
			<li class="close">
				<b class="toggle"></b>
				<span>Closed element</span>
				<ul class="with-icon icon-user">
					<li><a href="javascript:void(0)">Erik</a></li>
					<li><a href="javascript:void(0)">James</a></li>
					<li><a href="javascript:void(0)">Nathan</a></li>
					<li><a href="javascript:void(0)">Elwin</a></li>
				</ul>
			</li>
			<li class="close">
				<b class="toggle"></b>
				<span>Closed element</span>
				<ul class="with-icon icon-user">
					<li><a href="javascript:void(0)">Erik</a></li>
					<li><a href="javascript:void(0)">James</a></li>
					<li><a href="javascript:void(0)">Nathan</a></li>
					<li><a href="javascript:void(0)">Elwin</a></li>
				</ul>
			</li>
		</ul>
		
		<h4 class="small-margin">With background</h4>
		<ul class="collapsible-list with-bg">
			<li class="close">
				<b class="toggle"></b>
				<span>Expanded element</span>
				<ul class="with-icon icon-group">
					<li class="close">
						<span>Administrators</span>
						<ul class="icon-user">
							<li><a href="javascript:void(0)">Jane</a></li>
							<li><a href="javascript:void(0)">George</a></li>
						</ul>
					</li>
					<li class="close">
						<span>Authors</span>
						<ul class="icon-user">
							<li><a href="javascript:void(0)">Erik</a></li>
							<li><a href="javascript:void(0)">James</a></li>
							<li><a href="javascript:void(0)">Nathan</a></li>
							<li><a href="javascript:void(0)">Elwin</a></li>
						</ul>
					</li>
					<li>
						<span>Product managers</span>
						<ul class="icon-user">
							<li><a href="javascript:void(0)">John</a></li>
							<li><a href="javascript:void(0)">Sam</a></li>
							<li><a href="javascript:void(0)">Lena</a></li>
							<li><a href="javascript:void(0)">Marc</a></li>
						</ul>
					</li>
					<li class="close">
						<span>Users</span>
						<ul>
							<li class="empty">No user</li>
						</ul>
					</li>
				</ul>
			</li>
			<li class="close">
				<b class="toggle"></b>
				<span>Closed element</span>
				<ul class="with-icon icon-user">
					<li><a href="javascript:void(0)">Erik</a></li>
					<li><a href="javascript:void(0)">James</a></li>
					<li><a href="javascript:void(0)">Nathan</a></li>
					<li><a href="javascript:void(0)">Elwin</a></li>
				</ul>
			</li>
			<li class="close">
				<b class="toggle"></b>
				<span>Closed element</span>
				<ul class="with-icon icon-user">
					<li><a href="javascript:void(0)">Erik</a></li>
					<li><a href="javascript:void(0)">James</a></li>
					<li><a href="javascript:void(0)">Nathan</a></li>
					<li><a href="javascript:void(0)">Elwin</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>

<h4>The class no-toggle-icon</h4>
<p>When applied to a list, the class <strong>no-toggle-icon</strong> will hide icons for branches having a <strong>toggle</strong> element:</p>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html;">
&lt;ul class="collapsible-list with-bg"&gt;
	&lt;li&gt;
		&lt;b class="toggle"&gt;&lt;/b&gt;
		&lt;span&gt;Expanded element&lt;/span&gt;
		
		&lt;!-- Add the class to any element having 'with-icon' or below --&gt;
		&lt;ul class="with-icon icon-group no-toggle-icon"&gt;
			&lt;li class="close"&gt;
				
				...
				
			&lt;/li&gt;
			&lt;li class="close"&gt;
				
				...
				
			&lt;/li&gt;
			&lt;li class="close"&gt;
				
				...
				
			&lt;/li&gt;
			&lt;li class="close"&gt;
				
				...
				
		&lt;/ul&gt;
	&lt;/li&gt;
&lt;/ul&gt;
</pre>
	</div>
	<div class="colx3-right">
		<h4 class="small-margin">Without class no-toggle-icon</h4>
		<ul class="collapsible-list with-bg">
			<li>
				<b class="toggle"></b>
				<span>Expanded element</span>
				<ul class="with-icon icon-group">
					<li class="close">
						<b class="toggle"></b>
						<span>Administrators</span>
						<ul class="icon-user">
							<li><a href="javascript:void(0)">Jane</a></li>
							<li><a href="javascript:void(0)">George</a></li>
						</ul>
					</li>
					<li class="close">
						<b class="toggle"></b>
						<span>Authors</span>
						<ul class="icon-user">
							<li><a href="javascript:void(0)">Erik</a></li>
							<li><a href="javascript:void(0)">James</a></li>
							<li><a href="javascript:void(0)">Nathan</a></li>
							<li><a href="javascript:void(0)">Elwin</a></li>
						</ul>
					</li>
					<li class="close">
						<span>Product managers</span>
						<ul class="icon-user">
							<li><a href="javascript:void(0)">John</a></li>
							<li><a href="javascript:void(0)">Sam</a></li>
							<li><a href="javascript:void(0)">Lena</a></li>
							<li><a href="javascript:void(0)">Marc</a></li>
						</ul>
					</li>
					<li class="close">
						<span>Users</span>
						<ul>
							<li class="empty">No user</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
		
		<h4 class="small-margin">With class no-toggle-icon</h4>
		<ul class="collapsible-list with-bg">
			<li>
				<b class="toggle"></b>
				<span>Expanded element</span>
				<ul class="with-icon icon-group no-toggle-icon">
					<li class="close">
						<b class="toggle"></b>
						<span>Administrators</span>
						<ul class="icon-user">
							<li><a href="javascript:void(0)">Jane</a></li>
							<li><a href="javascript:void(0)">George</a></li>
						</ul>
					</li>
					<li class="close">
						<b class="toggle"></b>
						<span>Authors</span>
						<ul class="icon-user">
							<li><a href="javascript:void(0)">Erik</a></li>
							<li><a href="javascript:void(0)">James</a></li>
							<li><a href="javascript:void(0)">Nathan</a></li>
							<li><a href="javascript:void(0)">Elwin</a></li>
						</ul>
					</li>
					<li class="close">
						<span>Product managers</span>
						<ul class="icon-user">
							<li><a href="javascript:void(0)">John</a></li>
							<li><a href="javascript:void(0)">Sam</a></li>
							<li><a href="javascript:void(0)">Lena</a></li>
							<li><a href="javascript:void(0)">Marc</a></li>
						</ul>
					</li>
					<li class="close">
						<span>Users</span>
						<ul>
							<li class="empty">No user</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Definition list</h2>

<p>By default, the &lt;dl&gt; element is not styled. To add some visual candy, just use the class <strong>definition</strong>:</p>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html;">
&lt;dl class="definition"&gt;
	&lt;dt&gt;Some word&lt;/dt&gt;
	&lt;dd&gt;Lorem ipsum dolor sit amet... magna aliqua.&lt;/dd&gt;
	
	&lt;dt&gt;Other word&lt;/dt&gt;
	&lt;dd&gt;Lorem ipsum dolor sit amet... magna aliqua.&lt;/dd&gt;
	
	&lt;dt&gt;Last word&lt;/dt&gt;
	&lt;dd&gt;Lorem ipsum dolor sit amet... magna aliqua.&lt;/dd&gt;
&lt;/dl&gt;
</pre>
	</div>
	<div class="colx3-right">
		<dl class="definition">
			<dt>Some word</dt>
			<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
			<dt>Other word</dt>
			<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
			<dt>Last word</dt>
			<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
		</dl>
	</div>
</div>
</div>

<div class="block-content no-title">
<h2>Accordion list</h2>

<p class="message warning">This style requires the file <strong>js/list.js</strong> to be fully fonctional.</p>

<div class="columns">
	<div class="colx3-left-double">
		<pre class="brush: html;">
&lt;dl class="accordion"&gt;
	&lt;dt&gt;&lt;span class="number"&gt;1&lt;/span&gt; First step&lt;/dt&gt;
	&lt;dd&gt;Lorem ipsum dolor sit amet... magna aliqua.&lt;/dd&gt;
	
	&lt;dt&gt;&lt;span class="number"&gt;2&lt;/span&gt; Second step&lt;/dt&gt;
	&lt;dd&gt;Lorem ipsum dolor sit amet... magna aliqua.&lt;/dd&gt;
	
	&lt;dt&gt;&lt;span class="number"&gt;3&lt;/span&gt; Third step&lt;/dt&gt;
	&lt;dd&gt;Lorem ipsum dolor sit amet... magna aliqua.&lt;/dd&gt;
&lt;/dl&gt;
</pre>
	</div>
	<div class="colx3-right">
		<dl class="accordion">
			<dt><span class="number">1</span> First step</dt>
			<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
			<dt><span class="number">2</span> Second step</dt>
			<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
			<dt><span class="number">3</span> Third step</dt>
			<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
		</dl>
	</div>
</div>
</div>